<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>微信平台视频付费系统</title>
        <link rel="stylesheet" href="/assets/home/css/mui.min.css" />
        <link rel="stylesheet" href="/assets/home/css/swiper-bundle.css" />
        <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
        <link rel="stylesheet" href="/assets/home/css/reset.css"  />
        <link rel="stylesheet" href="/assets/home/css/common.css" />
        <link rel="stylesheet" href="/assets/home/css/index.css"  />
        <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
        <script src="/assets/home/js/mui.min.js"></script>
        <script src="/assets/home/js/swiper-bundle.min.js"></script>
        <script src="/assets/home/js/wow.min.js"></script>
    </head>

    <body>
        <div class="mui-content">
            <div class="swiper mySwiper wow fadeIn">
                <div class="swiper-wrapper">
                    {foreach $subjectSwiper as $swiper}
                    <div class="swiper-slide">
                        <a href="/home/course/details?id={$swiper.id}">
                            <img src="{$swiper.thumbs_text}">
                            <p class="mui-slider-title">{$swiper.title}</p>
                        </a>
                    </div>
                    {/foreach}
                </div>
                <div class="swiper-pagination" style="text-align: right;"></div>
            </div>
        </div>

        <div class="menulist">
            <div class="item wow bounceIn" data-wow-delay="100ms">
                <a href="home/index/live">
                    <img src="/assets/home/images/live.png" alt="">
                    <div class="name">课程直播</div>
                </a>
            </div>

            <div class="item wow bounceIn" data-wow-delay="200ms">
                <a href="home/index/comment">
                    <img src="/assets/home/images/comment.png" alt="">
                    <div class="name">学员评论</div>
                </a>
            </div>

            <div class="item wow bounceIn" data-wow-delay="300ms">
                <a href="home/index/ranking">
                    <img src="/assets/home/images/ranking.png" alt="">
                    <div class="name">课程榜单</div>
                </a>
            </div>

            <div class="item wow bounceIn" data-wow-delay="400ms">
                <a href="home/discount/coupon_list">
                    <img src="/assets/home/images/coupon.png" alt="">
                    <div class="name">领取优惠</div>
                </a>
            </div>
        </div>

        <div class="list">
            <div class="title wow">精选课程</div>
            <ul>
                {foreach $subjectList as $key=>$subject}
                <li class="wow" data-wow-delay="{$key*20+100}ms">
                    <a href="/home/course/details?id={$subject.id}">
                        <div class="imgs">
                            <img class="mui-media-object" src="{$subject.thumbs_text}">
                        </div>
                        <div class="mui-media-body">{$subject.title}</div>
                        <div class="info">
                            <div class="price">￥{$subject.price}</div>
                            <div class="like">
                                {$subject.likes_num}
                                <img src="/assets/home/images/thumbs-up.png" alt="">
                            </div>
                        </div>
                    </a>
                </li>
                {/foreach}
            </ul>
        </div>

        <!-- 精选名师 -->
        <div class="list teacher">
            <div class="title wow">精选名师</div>
            <ul>
                {foreach $teacherList as $key=>$teacher}
                <li class="wow" data-wow-delay="{$key*20+100}ms">
                    <a href="/home/educator/teacherInfo?id={$teacher.id}">
                        <div class="imgs">
                            <img class="mui-media-object" src="{$teacher.avatar_text}">
                        </div>
                        <div class="mui-media-body">{$teacher.name}</div>
                        <div class="info">
                            <div class="num">课程：{$teacher.subject_num}</div>
                            <div class="like">
                                {$teacher.follows|count}
                                <img src="/assets/home/images/like.png" alt="">
                            </div>
                        </div>
                    </a>
                </li>
                {/foreach}
            </ul>
        </div>
        <script>localStorage.setItem("menu",0)</script>
        {include file="common/footer" /}
    </body>
</html>
<script>
    var swiper = new Swiper(".mySwiper", {
        pagination: {
            el: ".swiper-pagination",
        },
        loop: true,
        autoplay:true,
    });

    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: '#box' // 可选滚动容器选择器，否则使用窗口
    }).init();
</script>